<script setup lang="ts">
interface logDepoly {
  timeStamp?: string;
  datas?: object;
}
const props = withDefaults(
  defineProps<{
    logNames?: string[];
    log: logDepoly;
  }>(),
  {
    logNames: () => ["模型名称", "IP", "端口", "镜像"],
    log: () => ({
      timeStamp: "2024-04-17 15:24:12",
      datas: {
        data1: "模型-XXX",
        data2: "192.168.0.1",
        data3: "6443",
        data4: "Ubuntu20.04"
      }
    })
  }
);
</script>

<template>
  <el-row class="log-header">
    {{ props.log.timeStamp }}
  </el-row>
  <el-row class="log-content">
    <p v-for="(name, index) in props.logNames" :key="name">
      <span>{{ name }}:</span> {{ props.log.datas[`data${index + 1}`] }}
    </p>
  </el-row>
</template>

<style lang="scss" scoped>
.log-header {
  padding-left: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
  background-color: rgb(214, 227, 255);
  font-weight: bold;
  font-size: 16;
}
.log-content {
  background-color: rgb(242 243 245);
  padding-left: 2vh;
  display: flex;
  flex-flow: column nowrap;
  span {
    font-weight: bold;
  }
}
</style>
